<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>layui后台管理 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/static/favicon.ico" th:href="@{/static/favicon.ico}">
	<script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>
</head>
<body style="overflow: hidden">
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:850px;"></div>
    
    <script type="text/javascript">
    
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        option = {
       	    title : {
       	        text: '某地区蒸发量和降水量',
       	        subtext: '纯属虚构'
       	    },
       	    tooltip : {
       	        trigger: 'axis'
       	    },
       	    legend: {
       	        data:['蒸发量','降水量']
       	    },
       	    toolbox: {
       	        show : true,
       	        feature : {
       	            dataView : {show: true, readOnly: false},
       	            magicType : {show: true, type: ['line', 'bar']},
       	            restore : {show: true},
       	            saveAsImage : {show: true}
       	        }
       	    },
       	    calculable : true,
       	    xAxis : [
       	        {
       	            type : 'category',
       	            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
       	        }
       	    ],
       	    yAxis : [
       	        {
       	            type : 'value'
       	        }
       	    ],
       	    series : [
       	        {
       	            name:'蒸发量',
       	            type:'bar',
       	            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
       	            markPoint : {
       	                data : [
       	                    {type : 'max', name: '最大值'},
       	                    {type : 'min', name: '最小值'}
       	                ]
       	            },
       	            markLine : {
       	                data : [
       	                    {type : 'average', name: '平均值'}
       	                ]
       	            }
       	        },
       	        {
       	            name:'降水量',
       	            type:'bar',
       	            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
       	            markPoint : {
       	                data : [
       	                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
       	                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
       	                ]
       	            },
       	            markLine : {
       	                data : [
       	                    {type : 'average', name : '平均值'}
       	                ]
       	            }
       	        }
       	    ]
       	};


        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>